<template>
  <div>
    <h2>Home:{{ $store.state.counter }}</h2>
    <h2>Home:{{ sCounter }}</h2>
    <h2>Home:{{ sName }}</h2>
    <!-- <h2>Home:{{ age }}</h2>
    <h2>Home:{{ height }}</h2> -->

    {{str}}
    {{name}}
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    // data(){
    //    return {
    //      ...mapState(['counter'])
    //    }
    // },
    computed: {
      fullName() {
        return "Kobe brant"
      },
      str:function(){
          return 'hello'
      },
      // 其他的计算属性, 从state获取
      // ...mapState(["counter", "name", "age", "height"]),
      // counter:function(){
      //   return 100
      // },
      // name:function(){
      //   return 'tom'
      // }

      ...mapState({
        sCounter: state => state.counter,
        sName: state => state.name
      }),

      // sCounter:function(){
      //   return 100
      // },
      // sName(){
      //   return 'tom'
      // }
    }
  }
</script>

<style scoped>

</style>